<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form ref="form" :model="form" >
              <el-descriptions  title="J方直签合同信息" :column="2" border v-if="form.contractType == '1'">
                <el-descriptions-item label="采购部门" label-class-name="my-label"   :contentStyle='contentStyle1' :labelStyle="labelStyle1">{{ form.procurementDepartment}}</el-descriptions-item>
                <el-descriptions-item label="项目类别" label-class-name="my-label" :contentStyle='contentStyle1' :labelStyle="labelStyle1">
                  <dict-tag :options="dict.type.yh_item_classification" :value="form.projectType" />
                </el-descriptions-item>
                <el-descriptions-item label="装备承制单位"  label-class-name="my-label"  :contentStyle='contentStyle1' :labelStyle="labelStyle1">
                  <dict-tag :options="dict.type.yh_contractor_unit" :value="form.contractorUnit"/>
                </el-descriptions-item>
                <el-descriptions-item label="监管军事代表室"  label-class-name="my-label" :contentStyle='contentStyle1' :labelStyle="labelStyle1">
                  <dict-tag :options="dict.type.yh_representative_office" :value="form.representativeOffice" />
                </el-descriptions-item>
                <el-descriptions-item label="项目管理机构" label-class-name="my-label"   :contentStyle='contentStyle1' :labelStyle="labelStyle1">{{ form.managementAgency}}</el-descriptions-item>
                <el-descriptions-item label="任务确认时间" label-class-name="my-label" :contentStyle='contentStyle1' :labelStyle="labelStyle1">{{ form.taskConfirmationTime}}</el-descriptions-item>
                </el-descriptions>
            <br/>
              <el-descriptions  title="装备承制单位合同信息" :column="4" border v-if="form.contractType == '2'">
                <el-descriptions-item label="采购部门" label-class-name="my-label"   :contentStyle='contentStyle' :labelStyle="labelStyle">{{ form.procurementDepartment}}</el-descriptions-item>
                <el-descriptions-item label="合同类别"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle">
                  <dict-tag :options="dict.type.yh_contract_type" :value="form.contractType"/>
                </el-descriptions-item>
                <el-descriptions-item label="合同类型"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle">
                  <dict-tag :options="dict.type.yh_contract_declare" :value="form.contractDeclare"/>
                </el-descriptions-item>
                <el-descriptions-item label="总体装备承制单位" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle">{{ form.generalContractorUnit}}</el-descriptions-item>
                <el-descriptions-item label="总体军事代表室" label-class-name="my-label"  :contentStyle='contentStyle' :labelStyle="labelStyle">{{ form.generalRepresentativeOffice}}</el-descriptions-item>
                <el-descriptions-item label="项目类别" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle">
                  <dict-tag :options="dict.type.yh_item_classification" :value="form.contractType" />
                </el-descriptions-item>
                <el-descriptions-item label="承制单位"  label-class-name="my-label"  :contentStyle='contentStyle' :labelStyle="labelStyle">
                  <dict-tag :options="dict.type.yh_contractor_unit" :value="form.contractorUnit"/>
                </el-descriptions-item>
                <el-descriptions-item label="监管军事代表室"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle">
                  <dict-tag :options="dict.type.yh_representative_office" :value="form.representativeOffice" />
                </el-descriptions-item>
                <el-descriptions-item label="监管事项"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle">{{ form.regulation }}</el-descriptions-item>
                <el-descriptions-item label="进度要求" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle">{{ form.timeRequirements}}</el-descriptions-item>
                <el-descriptions-item label="项目管理机构" label-class-name="my-label"   :contentStyle='contentStyle' :labelStyle="labelStyle">{{ form.managementAgency}}</el-descriptions-item>
                <el-descriptions-item label="任务确认时间"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle">{{ form.taskConfirmationTime}}</el-descriptions-item>
                <el-descriptions-item label="项目配套协议号"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle">{{ form.matchingContractNo}}</el-descriptions-item>
                <el-descriptions-item label="数据流水号"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.sequenceNumber}}</el-descriptions-item>
                <el-descriptions-item label="备注" :span="4" label-class-name="my-label"  :contentStyle='contentStyle' :labelStyle="labelStyle">{{ form.remark}}</el-descriptions-item>
            </el-descriptions>
        <el-table :data="product" border style="margin-top: 8px;" v-if="form.contractType == '2'">
          <el-table-column type="index" label="序号" width="55"  align="center" />
          <el-table-column label="装备型号" align="center" prop="productModel" />
          <el-table-column label="名称" align="center" prop="productName" />
          <el-table-column label="产品图代号" align="center" prop="leaderBusinessPhone" />
          <el-table-column label="计量单位" align="center" prop="measurementUnit" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.yh_measurement_unit" :value="scope.row.measurementUnit"/>
          </template>
          </el-table-column>
        </el-table>
        <el-table :data="product" border style="margin-top: 8px;" v-if="form.contractType == '1'">
          <el-table-column type="index" label="序号" width="55"  align="center" />
          <el-table-column label="产品型号" align="center"  />
          <el-table-column label="名称" align="center" prop="productName" />
          <el-table-column label="装备型号" align="center" prop="productModel" />
          <el-table-column label="计量单位" align="center" prop="measurementUnit" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.yh_measurement_unit" :value="scope.row.measurementUnit"/>
          </template>
          </el-table-column>
        </el-table>
      </el-form>
      <br/>
      <div style="float:right; margin-bottom: 15px;">
        <el-button @click="viewCancel">返 回</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import { listContract, getContract, delContract, addContract, updateContract } from "@/api/module/cjl/contract";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getProductType } from "@/api/module/gs/product/product";
import watermark from "watermark-dom";
export default {
  name: "Contract",
  dicts: ['sys_job_status','yh_contract_type','yh_contract_declare','yh_item_classification','yh_representative_office','yh_equipment_contractor_unit','yh_contractor_unit','yh_measurement_unit'],
  components: { Treeselect },
  data() {
    return {
      contentStyle: {
        'width': '220px',
      },
      contentStyle1: {
        'width': '500px',
      },
      //label样式
      labelStyle: { 'width': '180px','color': '#000000','text-align': 'right', },
      //label样式
      labelStyle1: { 'width': '140px','color': '#000000','text-align': 'right', },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 部门树选项
      deptOptions: undefined,
      // 合同台账表格数据
      contractList: [],
      // 岗位选项
      postOptions: [],
      //产品信息
      product: [],
      // 部门名称
      deptName: undefined,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sequenceNumber: null,
        projectName: null,
        contractType: null,
        equipName: null,
        equipVersion: null,
        quantity: null,
        technicalConditions: null,
        contractNo: null,
        contractDeclare: null,
        representativeOffice: null,
        regulation: null,
        projectType: null,
        purchasingDepartment: null,
        taskConfirmationTime: null,
        executiveStaff: null,
        taskStatus: null,
        completionTime: null,
        note: null,
        paymentTime: null,
        managementAgency: null,
        equipmentContractorUnit: null,
        scheduleTarget: null,
        contractorUnit: null,
        matchingContractNo: null,
        generalRepresentativeOffice: null,
        generalContractorUnit: null,
        projectManagementAgency: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 表单参数
      form: {},
      // 用户查询参数
      view:{
        // 是否显示弹出层（用户查询）
        open: false,
        // 弹出层标题（用户查询）
        title: "",
      },
    };
  },
  mounted() {
    watermark.load({ watermark_txt: "  "   });
  },
  created() {
    this.getList();
    const id = this.$route.query.id;
    if (id) {
      // 获取表详细信息
      getContract(id).then(res => {
        this.form = res.data;
      });
    }
  },
  methods: {
    getList() {
      this.loading = true;
      let type = this.$route.query.type
        getProductType(type).then(response => {
          this.product = response.rows;
          this.total = response.total;
          this.loading = false;
        });
    },
    /** 关闭按钮 */
    viewCancel() {
      const id = this.$route.query.id;
      getContract(id).then(response => {
        this.form = response.data;

      });
      const obj = { path: "/hetong/cjlsecond", query: {id} };
      this.$tab.closeOpenPage(obj);
  },

    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
  }
};
</script>
<style lang="scss" scoped>



</style>
